<template>
  <div class="app-container">
    <div style="display: flex;margin-bottom: 10px;">
      <div>
        <el-input v-model="listQuery.keyword" placeholder="搜索关键字" clearable></el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="Refresh()">
          刷新
        </el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="list_add()">
          添加
        </el-button>
      </div>
    </div>
    <div>
      <!-- 列表 -->
      <el-table :data="list" border style="width: 100%;" v-loading="listLoading">
        <el-table-column label="id" prop="id" align="center" width="70px">
          <template slot-scope="{row}">
            <span @click="details_click()">{{row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务类型" prop="id" align="left">
          <template slot-scope="{row}">
            <span class="link-type" @click="details(row)">{{row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" width="90px">
          <template slot-scope="{row}">
            <span>{{ row.unit}}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" width="90px">
          <template slot-scope="{row}">
            <span>{{row.price}}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="最低价" align="center" width="90px">
          <template slot-scope="{row}">
            <span>{{ row.max_price}}</span>
          </template>
        </el-table-column>

        <el-table-column label="最高价" align="center" width="90px">
          <template slot-scope="scope">
            <span>{{scope.row.min_price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" width="90px">
          <template slot-scope="{row}">
            <span>{{ row.sort}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="130px">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" type="success" @click="edit(scope)">
              <!-- 编辑 -->
            </el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="submit_del(scope)">
              <!-- 删除 -->
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹框 -->
      <el-dialog title="添加" :visible.sync="tan_add" width="50%" center>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input type="number" v-model="form.price" placeholder="请输入单价">
            </el-input>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
          </el-form-item>
          <el-form-item label="最高价">
            <el-input type="number" v-model="form.min_price" placeholder="请输入最高价"></el-input>
          </el-form-item>
          <el-form-item label="最低价">
            <el-input type="number" v-model="form.max_price" placeholder="请输入最低价"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="4" v-model="form.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="form.sort" type="number" placeholder="请输入排序"></el-input>
            <span class="sort-class">排序从大到小</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="tan_add = false">取 消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="submit_add()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 详情 -->
      <el-dialog title="详情" :visible.sync="tan_details" width="50%" center>
        <el-form :model="detailsfor" :rules="rules" ref="detailsfor" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="title">
            <!-- <el-input :disabled="true" v-model="detailsfor.title" placeholder="请输入名称"></el-input> -->
            <span>{{detailsfor.title}}</span>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <!-- <el-input :disabled="true" v-model="detailsfor.price" placeholder="请输入单价"></el-input> -->
            <span>{{detailsfor.price}}</span>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <!-- <el-input :disabled="true" v-model="detailsfor.unit" placeholder="请输入单位"></el-input> -->
            <span>{{detailsfor.unit}}</span>
          </el-form-item>
          <el-form-item label="最高价">
            <!-- <el-input :disabled="true" v-model="detailsfor.min_price" placeholder="请输入最高价"></el-input> -->
            <span>{{detailsfor.min_price}}</span>
          </el-form-item>
          <el-form-item label="最低价">
            <!-- <el-input :disabled="true" v-model="detailsfor.max_price" placeholder="请输入最低价"></el-input> -->
            <span>{{detailsfor.max_price}}</span>
          </el-form-item>
          <el-form-item label="备注">
            <!-- <el-input :disabled="true" type="textarea" :rows="4" v-model="detailsfor.remark" placeholder="请输入备注"></el-input> -->
            <span>{{detailsfor.remark}}</span>
          </el-form-item>
          <el-form-item label="排序">
            <!-- <el-input :disabled="true" v-model="detailsfor.sort" placeholder="请输入排序"></el-input> -->
            <span>{{detailsfor.sort}}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="tan_details = false">取 消</el-button>
          <el-button type="primary" @click="details_ok()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="编辑" :visible.sync="tan_edit" width="50%" center>
        <el-form :model="editform" :rules="rules" ref="editform" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="title">
            <el-input v-model="editform.title" c></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="editform.price"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="editform.unit"></el-input>
          </el-form-item>
          <el-form-item label="最高价">
            <el-input v-model="editform.min_price" type="number"></el-input>
          </el-form-item>
          <el-form-item label="最低价">
            <el-input v-model="editform.max_price" type="number"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="4" v-model="editform.remark" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="editform.sort" type="number"></el-input>
            <span class="sort-class">排序从大到小</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="tan_edit=false">取 消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="submit_edit()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="page_limit"
          layout="total, sizes, prev, pager, next, jumper" :total="page_count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  //判断数字
  const isNum = (rule, value, callback) => {
    const age = /^[0-9]*$/
    if (!age.test(value)) {
      callback(new Error('金额只能为数字'))
    } else {
      callback()
    }
  }
  import {
    bus_list,
    bus_add,
    bus_del,
    bus_edit
  } from "@/api/setup/setup_buslist.js"
  // import buslist from "./components/buslist.vue"
  export default {
    // components:{
    //   buslist
    // },
    data() {
      return {
        //弹框
        tan_add: false,
        tan_details: false,
        tan_edit: false,
        listQuery: {
          keyword: ""
        },
        editform: {},
        detailsfor: {},
        form: {
          title: "",
          sort: 0
        },
        rules: {
          title: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }, ],
          price: [
            // { required: true, message: '请输入金额', trigger: 'blur' },
            // { validator: isNum, trigger: 'blur' },
            {
              required: true,
              message: '请填写正确的金额,保留两位小数',
              trigger: 'blur',
              pattern: /(^[\d]|^[1-9][\d]*)($|[\.][\d]{0,2}$)/
            }
          ],
          unit: [{
            required: true,
            message: '请输入单位',
            trigger: 'blur'
          }, ],
          min_price: [{
            validator: isNum,
            trigger: 'blur'
          }],
          max_price: [{
            validator: isNum,
            trigger: 'blur'
          }]
        },
        //列表
        list: [],
        //转圈
        submitLoading: false,
        //列表转圈
        listLoading: false,
        //分页
        // tableKey: 1,
        currentPage: 1,
        page_count: 200,
        // fen_list: 10,
        page_limit: 10,
      }
    },
    mounted() {
      this.reqery()
    },
    methods: {
      //每页几条数据
      handleSizeChange(val) {
        console.log(val, "上")
        this.page_limit = val
        this.reqery(1, this.page_limit, this.listQuery)
      },
      //跳转到
      handleCurrentChange(val) {
        this.currentPage = val
        this.reqery(this.currentPage, this.page_limit, this.listQuery.keyword)
      },
      //请求列表
      reqery() {
        this.listLoading = true
        bus_list(this.currentPage, this.page_limit, this.listQuery.keyword).then(res => {
          console.log(res)
          this.listLoading = false
          this.list = res.data
          this.page_count = res.count
        })
      },
      //列表添加
      list_add() {
        let that = this
        that.tan_add = true
      },
      //列表添加ok
      submit_add() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            bus_add(this.form.title, this.form.price, this.form.min_price, this.form.max_price, this.form.unit, this
              .form.sort, this.form.remark).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.submitLoading = false
                this.tan_add = false
                this.form = {}
                this.form.sort = 0
                this.reqery()
              }
            })
          }
        })
      },
      //列表删除
      submit_del(scope) {
        bus_del(scope.row.id).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.reqery()
          }
        })
      },
      //详情
      details(val) {
        console.log(val)
        let that = this
        that.tan_details = true
        that.detailsfor = val
      },
      //修改
      edit(val) {
        let that = this
        console.log(val)
        that.tan_edit = true
        that.editform = val.row
      },
      //修改ok
      submit_edit() {
        let that = this
        console.log("www")
        this.submitLoading = false
        this.$refs.editform.validate((valid) => {
          if (valid) {
            bus_edit(that.editform.id, that.editform.title, that.editform.price, that.editform.min_price, that
              .editform.max_price, that.editform.unit, that.editform.sort, that.editform.remark).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.submitLoading = false
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                that.tan_edit = false
                that.reqery()
              }
            })
          }
        })
      },
      //搜索
      searchList() {
        this.reqery(1, this.page_limit, this.listQuery.keyword)
      },
      //刷新
      Refresh() {
        this.listLoading = true
        this.listQuery.keyword = ""
        bus_list(1, 10, "").then(res => {
          console.log(res)
          if (res.code == 200) {
            this.currentPage = 1
            this.page_limit = 10
            this.list = res.data
            this.listLoading = false
            this.page_count = res.count
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .sort-class {
    color: #67B5F4;
    font-size: 12px;
  }

  .fenye {
    padding: 20px 0px;
  }
</style>
